<template>
    <div class="person-culture-plan">
        <p class="title">
            <img src="/static/images/icon/icon_cultureplan.png" />
            <span>{{ $t("workbench.personalCultruePlan") }}</span>
        </p>
        <div class="culture-plan-table">
            <table class="personal" style="margin:16px 0">
                <tbody>
                    <tr>
                        <td rowspan="2">
                            {{ $t("culturePlan.courseCategory") }}
                        </td>
                        <td
                            v-for="label in firstRow"
                            :colspan="label.colspan"
                            :rowspan="label.rowspan"
                        >
                            {{ label.text }}
                        </td>
                    </tr>
                    <tr>
                        <td
                            v-for="label in secondRow"
                            :colspan="label.colspan"
                            :rowspan="label.rowspan"
                        >
                            {{ label.text }}
                        </td>
                    </tr>
                    <tr>
                        <td>{{ $t("workbench.completedCredits") }}</td>
                        <td v-for="label in thirdRow">
                            <b :class="`${label.color}-font`">{{ label.ln }}</b>/{{ label.rn }}
                        </td>
                    </tr>
                    <tr>
                        <td>{{ $t("workbench.subtotal") }}</td>
                        <td
                            v-for="label in fourthRow"
                            :rowspan="label.rowspan"
                            :colspan="label.colspan"
                        >
                            <b>{{ `${label.ln}/${label.rn}` }}</b>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ $t("workbench.total") }}</td>
                        <td
                            v-for="label in fifthRow"
                            :rowspan="label.rowspan"
                            :colspan="label.colspan"
                        >
                            <b>{{ `${label.ln}/${label.rn}` }}</b>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="tips">
                <span v-for="label in thirdRow" class="tips-item">
                    <span
                        class="cricle"
                        :class="`${colorArr[label.index]}-bg`"
                    ></span>
                    <label>{{ label.text }}</label>
                    <span>
                        <b :class="`${colorArr[label.index]}-font`">{{
                            label.ln
                        }}</b>
                        /{{ label.rn }}
                    </span>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
import EduTable from "common/src/components/common/EduTable";
import { studentPlanCountByStuId } from "common/src/api/culture/culturePlan";

export default {
    name: "PersonCulturePlan",
    props: {
        mockUser: {
            type: Object
        },
        currentUser: {
            type: Object
        }
    },
    data() {
        return {
            firstRow: [],
            secondRow: [],
            thirdRow: [],
            fourthRow: [],
            fifthRow: [],
            colorArr: [
                "blue",
                "cyan",
                "green",
                "pink",
                "yellow",
                "purple",
                "orange",
                "brown",
                "bluePurple",
                "gray"
            ] // 对应颜色数组
        };
    },
    created() {
        let uid = "";
        if (!this.mockUser) {
            uid = this.currentUser.uid;
        } else {
            uid = this.mockUser.uid;
        }
        this.dataInit(uid);
    },
    components: {
        EduTable
    },
    computed: {
        currentUser() {
            if (this.$store.state.session.user) {
                return this.$store.state.session.user;
            }
        },
        mockUser() {
            if (this.$store.state.session.mockUser) {
                return this.$store.state.session.mockUser;
            }
        }
    },
    methods: {
        dataInit(uid) {
            let _this = this;
            studentPlanCountByStuId(uid).then(res => {
                if (res.code == 200) {
                    let list = res.data ? res.data : [];
                    this.currentDptId = this.mockUser
                        ? this.mockUser.currentManageDptId
                        : this.currentUser.currentManageDptId;
                    if(this.currentDptId*1 == 4){
                        list.filter(e=>e.labelId !== 9999)
                    }
                    let plist = list.filter(e => e.children);
                    let slist = list.filter(e => !e.children);
                    let pids = [];
                    plist.forEach(e => {
                        e.children.forEach(c => {
                            pids.push(c);
                        });
                    });
                    this.firstRow = list
                        .filter(l => {
                            if (pids.findIndex(p => p == l.labelId) < 0)
                                return l;
                        })
                        .map(f => {
                            if (
                                plist.findIndex(pl => pl.labelId == f.labelId) >
                                -1
                            ) {
                                return {
                                    credit: f.credit,
                                    labelId: f.labelId,
                                    text: f.labelName,
                                    rowspan: 1,
                                    colspan: 2
                                };
                            } else {
                                return {
                                    credit: f.credit,
                                    labelId: f.labelId,
                                    text: f.labelName,
                                    rowspan: 2,
                                    colspan: 1
                                };
                            }
                        });
                    this.secondRow = list
                        .filter(l => {
                            if (pids.findIndex(p => p == l.labelId) > -1)
                                return l;
                        })
                        .map(s => {
                            return {
                                credit: s.credit,
                                labelId: s.labelId,
                                text: s.labelName,
                                colspan: 1,
                                rowspan: 1
                            };
                        });
                    this.thirdRow = _.sortBy(_.cloneDeep(slist),function(item){
                        return -item.parentId
                    }).map((s, i) => {
                        const credits = s.credit.split("/");
                        return {
                            index: i,
                            text: s.labelName,
                            ln: +credits[0],
                            rn: +credits[1],
                            color: this.colorArr[i]
                        };
                    });
                    this.fourthRow = _.cloneDeep(this.firstRow).map(f => {
                        if (plist.findIndex(p => p.labelId == f.labelId) < 0) {
                            f.rowspan = 1;
                        }
                        const credits = f.credit.split("/");
                        f.ln = +credits[0];
                        f.rn = +credits[1];
                        return f;
                    });
                    let ln = 0,
                        rn = 0;
                    this.firstRow.forEach(f => {
                        const credits = f.credit.split("/");
                        ln += +credits[0];
                    });
                    this.firstRow.forEach(f => {
                        const credits = f.credit.split("/");
                        rn += +credits[1];
                    });
                    this.fifthRow = [
                        {
                            rowspan: 1,
                            colspan: slist.length,
                            ln: ln,
                            rn: rn
                        }
                    ];
                }
            });
        },
    }
};
</script>
<style lang="scss" scoped>
.person-culture-plan {
    // padding: 24px;
    height: 100%;
    .title {
        font-size: 18px;
        color: #2b3b4e;
        letter-spacing: 0;
        line-height: 24px;
        margin-bottom: 4px;
        font-weight: bolder;
        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 8px;
        }
        span {
            vertical-align: middle;
        }
    }
    .culture-plan-table {
        height: calc(100% - 30px);
        .personal {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #000000;
            height: calc(100% - 60px);
            td {
                text-align: center;
                // height: 24px;
                padding: 10px 0;
                vertical-align: middle;
                border-collapse: collapse;
                border: 1px solid #e7e8e8;
                background: #fff;
                color: #606266;
            }
        }
        .tips {
            font-size: 12px;
            color: #4c5c70;
            height: 36px;
            .tips-item {
                display: inline-block;
                margin-right: 16px;
                height: 14px;
                line-height: 14px;
                margin-bottom: 8px;
                .cricle {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                }
                .blue-bg {
                    background-color: #3ba0ff;
                }
                .cyan-bg {
                    background-color: #36cbcb;
                }
                .green-bg {
                    background-color: #4dcb73;
                }
                .pink-bg {
                    background-color: #f2637b;
                }
                .yellow-bg {
                    background-color: #fad337;
                }
                .purple-bg {
                    background-color: #d147e9;
                }
                .orange-bg {
                    background-color: #ff6e40;
                }
                .brown-bg {
                    background-color: #bd6748;
                }
                .bluePurple-bg {
                    background-color: #7e44e4;
                }
                .gray-bg {
                    background-color: #607d8b;
                }
            }
        }
        .blue-font {
            color: #3ba0ff;
        }
        .cyan-font {
            color: #36cbcb;
        }
        .green-font {
            color: #4dcb73;
        }
        .pink-font {
            color: #f2637b;
        }
        .yellow-font {
            color: #fad337;
        }
        .purple-font {
            color: #d147e9;
        }
        .orange-font {
            color: #ff6e40;
        }
        .brown-font {
            color: #bd6748;
        }
        .bluePurple-font {
            color: #7e44e4;
        }
        .gray-font {
            color: #607d8b;
        }
    }
}
</style>
